<h2>Event Detail</h2>
<form id="eventDetail-frm" name="eventDetailFrm" class="form-horizontal" role="form" novalidate>
	<input id="eventId" name="eventId" type="hidden" value="{{$ctrl.event.id}}" />
	<input id="eventStatus" name="eventStatus" type="hidden" value="{{$ctrl.event.status}}" />
	<input id="eventFormEditable" name="eventFormEditable" type="hidden" ng-model='$ctrl.event.formEditable' />
	<fieldset id="eventDetail-frm-fs" ng-disabled="!$ctrl.event.formEditable">
		<div class="form-group">
			<label for="eventTitle" class="col-sm-2 control-label">Title</label>
			<div class="col-sm-10">
				<input id="eventTitle" name="eventTitle" type="text" class="form-control" placeholder="Title" ng-model='$ctrl.event.title' required />
				<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventTitle.$touched && eventDetailFrm.eventTitle.$invalid && eventDetailFrm.eventTitle.$dirty">
					<span ng-show="eventDetailFrm.eventTitle.$error.required">Event title required.</span>
				</span>
			</div>
		</div>
		<div class="form-group">
			<label for="eventDesc" class="col-sm-2 control-label">Description</label>
			<div class="col-sm-10">
				<textarea id="eventDesc" name="eventDesc" class="form-control" rows="3" placeholder="Description" ng-model='$ctrl.event.description'></textarea>
			</div>
		</div>
		<div class="form-group">
			<label for="eventStart" class="col-sm-2 control-label">Start</label>
			<div class="col-sm-10">
				<input id="eventStart" name="eventStart" class="form-control datePicker" ng-model='$ctrl.event.startStr' required />
				<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventStart.$touched && eventDetailFrm.eventStart.$invalid && eventDetailFrm.eventStart.$dirty">
					<span ng-show="eventDetailFrm.eventStart.$error.required">Event start date required.</span>
				</span>
			</div>
		</div>
		<div class="form-group">
			<label for="eventEnd" class="col-sm-2 control-label">End</label>
			<div class="col-sm-10">
				<input id="eventEnd" name="eventEnd" class="form-control datePicker" ng-model='$ctrl.event.endStr' required />
				<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventEnd.$touched && eventDetailFrm.eventEnd.$invalid && eventDetailFrm.eventEnd.$dirty">
					<span ng-show="eventDetailFrm.eventEnd.$error.required">Event end date required.</span>
				</span>
			</div>
		</div>
		<div class="form-group">
			<label for="eventOwner" class="col-sm-2 control-label">Owner</label>
			<div class="col-sm-10">
				<input id="eventOwner" name="eventOwner" class="form-control" placeholder="Owner" ng-model='$ctrl.event.owner' required />
				<span style="color:red;font-size:10px;" ng-show="eventDetailFrm.eventOwner.$touched && eventDetailFrm.eventOwner.$invalid && eventDetailFrm.eventOwner.$dirty">
					<span ng-show="eventDetailFrm.eventOwner.$error.required">Event owner required.</span>
				</span>
			</div>
		</div>
	</fieldset>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button id="edit-btn" type="button" class="btn btn-default" ng-click='$ctrl.activeEditable()' ng-hide='$ctrl.event.status == "Closed" || $ctrl.event.formEditable == true'>Edit</button>
			<button id="save-btn" type="button" class="btn btn-primary"
				ng-click='$ctrl.updateEventDetail()'
				ng-hide='$ctrl.event.formEditable == false'
				ng-disabled="eventDetailFrm.eventTitle.$dirty && eventDetailFrm.eventTitle.$invalid || 
					eventDetailFrm.eventStart.$dirty && eventDetailFrm.eventStart.$invalid || 
					eventDetailFrm.eventEnd.$dirty && eventDetailFrm.eventEnd.$invalid || 
					eventDetailFrm.eventOwner.$dirty && eventDetailFrm.eventOwner.$invalid">Save</button>
			<button type="button" class="btn btn-link" ng-click='$ctrl.back2Home()'>Back</button>
		</div>
	</div>
</form>